<template>
  <div>
    <h2>设置</h2>

    请选择搜索页面每页行数：
    <!-- 选择器 -->
    <el-select
      v-model="search_pageSize"
      placeholder="请选择页数"
      v-show="!isDIY"
      ref="select"
      @change="handleOptionChange"
    >
      <el-option
        v-for="item in search_pageSize_options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <!-- 计数器 -->
    <el-input-number
      v-show="isDIY"
      v-model="search_pageSize"
      :min="1"
      :max="1000"
      :controls="false"
      @change="handleChange"
      @focus="handleFocus"
      @blur="handleBlur"
      label="每页行数"
      ref="input_number"
    ></el-input-number>

    <!-- 按钮组 -->
    <el-row>
      <el-button-group>
        <el-button type="success" @click="handleConfirm">确认</el-button>
        <el-button type="primary">重置</el-button>
      </el-button-group>
    </el-row>

    <el-divider></el-divider>
    <!-- 百度翻译设置 -->
    <BaiduApi></BaiduApi>
  </div>
</template>

<script>
import BaiduApi from "./ApiSettings.vue"

export default {
  name: "Settings",
  components:{BaiduApi},
  data() {
    return {
      isDIY: false, // 是否处于自定义模式
      search_pageSize_options: [
        {
          value: "5",
          label: "5",
        },
        {
          value: "10",
          label: "10",
        },
        {
          value: "20",
          label: "20",
        },
        {
          value: "50",
          label: "50",
        },
        {
          value: "100",
          label: "100",
        },
        {
          value: "DIY",
          label: "自定义",
        },
      ],
      search_pageSize: "",
    };
  },
  methods: {
    handleEnter() {
        console.log("@@");
    },
    // 按下确认按钮
    handleConfirm() {
      this.$store.commit("search/SetPageSize", this.search_pageSize);
    },

    // 多选框改变时回调函数
    handleOptionChange(value) {
      if (value == "DIY") {
        this.isDIY = true;
        this.$nextTick(() => {
          this.$refs.input_number.select();
        });
      }
    },

    handleChange() {
    },
    // 自定义页码时获得焦点
    handleFocus() {
      //   console.log("获得焦点");
    },
    // 自定义页码时失去焦点
    handleBlur() {
      this.isDIY = false;
      // 当输入不符合规范时返回现在的页码数
      if (this.search_pageSize == "DIY") {
        this.search_pageSize = this.$store.state.search.pageSize;
      }
    },
  },
  mounted() {
    this.search_pageSize = this.$store.state.search.pageSize;
  },
};
</script>